<template>
  <el-tree
    :data="menus"
    :props="defaultProps"
    @node-click="handleNodeClick"
  ></el-tree>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios' // 或使用项目中已配置的http实例
import { getServiceUrl } from '@/utils/serviceDiscovery'
// 响应式数据
const menus = ref([])
const defaultProps = ref({
  children: 'children',
  label: 'label'
})

// 方法定义
const handleNodeClick = (data) => {
  console.log(data)
}

// 获取菜单数据
const getMenus = async () => {
  try {
    const productServiceUrl = await getServiceUrl('glmall-product')
    console.log(productServiceUrl)
    const response = await axios.get(`${productServiceUrl}/product/category/list/tree`)
    console.log("成功获取到菜单数据...", response.data.data)
    menus.value = response.data.data
  } catch (error) {
    console.error('Failed to fetch product data:', error)
    throw error
  }
}

// 生命周期钩子
onMounted(() => {
  getMenus()
})
</script>

<style scoped>
</style>